<template>
	<md-card style="margin:8px 0px;">
		<md-card-header md-alignment="space-between" style="display:flex;">
			<span class="md-title md-title-text" :title="rangeName+getLangText(label.rangeStyle)">{{rangeName}}{{getLangText(label.rangeStyle)}}</span>
			<span class="md-toolbar-section-end">
				<!-- <md-button class="md-icon-button" @click="sendStyle" v-show="isShow">
					<i class="iconfont iconsave"></i>
				</md-button> -->

				<md-button :class="['md-icon-button',isShow?'md-primary':'']" @click="sendStyle">
					<i :class="['iconfont', isShow?'iconsave':'iconshezhi2']"></i>
				</md-button>
			</span>
		</md-card-header>
		<md-card-content v-if="isShow">

			<div class="table-row-item">
					<span>{{getLangText(label.isRange)}}:</span>
					<span>
						{{getLangText(label.no)}}
						<md-switch v-model="isRange"></md-switch>
						{{getLangText(label.yes)}}
					</span>
			</div>

			<div class="table-row-item">
				<span>{{getLangText(label.symbolColor)}}:</span>
				<span>
					<md-button class="md-icon-button" @click="addColorPicker">
						<i class="iconfont iconadd"></i>
					</md-button>
				</span>
			</div>
			<div class="table-row-item" v-for="(item,idx) in rangeStyle.color">
				<span></span>
				<span>
					<span
						class="color-span"
						:style="{background:rangeStyle.color[idx]}"
						@click="showRangeColor('color',item,idx,)"
					></span>

					{{rangeStyle.color[idx]}}
					<md-button class="md-icon-button" @click="delColorPicker(idx)">
						<i class="iconfont iconshanchu"></i>
					</md-button>
				</span>
			</div>

			<color-picker
				:lang-type="langType"
				:rgba="picker.result"
				@color-result="onRangeColor"
				:show-picker="picker.show&&picker.current=='color'"
			></color-picker>

			 <md-field>
				<label>{{getLangText(label.symbol)}}</label>
				<md-select v-model="rangeStyle.symbol">
					<md-option :key="item.en" :value="item.en" v-for="item in symbol">{{getLangText(item)}}</md-option>
				</md-select>
			</md-field>
			<div style="display:flex;">
				<md-field style="width:135px;display:inline-flex;">
					<label>{{getLangText(label.symbolSize)}}1</label>
					<md-input v-model="rangeStyle.symbolSize[0]"></md-input>
				</md-field>
				<md-field style="width:135px;display:inline-flex;margin-left:8px;">
					<label>{{getLangText(label.symbolSize)}}2</label>
					<md-input v-model="rangeStyle.symbolSize[1]"></md-input>
				</md-field>

			</div>

			<md-field>
					<label>{{getLangText(label.symbolColorAlpha)}}</label>
					<md-input v-model="rangeStyle.colorAlpha"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.opacity)}}</label>
					<md-input v-model="rangeStyle.opacity"></md-input>
				</md-field>
				<div style="display:flex;">
				<md-field style="width:135px;">
					<label>{{getLangText(label.colorLightness)}}1</label>
					<md-input v-model="rangeStyle.colorLightness[0]"></md-input>
				</md-field>
				<md-field style="width:135px;margin-left:8px;">
					<label>{{getLangText(label.colorLightness)}}2</label>
					<md-input v-model="rangeStyle.colorLightness[1]"></md-input>
				</md-field>
				</div>
				<div style="display:flex;">
				<md-field style="width:135px;">
					<label>{{getLangText(label.colorSaturation)}}1</label>
					<md-input v-model="rangeStyle.colorSaturation[0]"></md-input>
				</md-field>
				<md-field style="width:135px;margin-left:8px;">
					<label>{{getLangText(label.colorSaturation)}}2</label>
					<md-input v-model="rangeStyle.colorSaturation[1]"></md-input>
				</md-field>
				</div>
				<md-field>
					<label>{{getLangText(label.colorHue)}}</label>
					<md-input v-model="rangeStyle.colorHue"></md-input>
				</md-field>

		</md-card-content>
	</md-card>
</template>
<script>
	import ColorPicker from "@/components/comp/ColorPicker";
	export default {
		name: "RangeStyle",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			rangeName: {
				type: String,
				default: ""
			},
			option:{
				type:Object,
				default:function(){
					return {};
				}
			}
		},
		components: {
			"color-picker": ColorPicker
		},
		data: () => ({
			label: {
				rangeStyle: { zh: "视觉通道", en: "VisualRange" },
				yes: { zh: "是", en: "yes" },
				no: { zh: "否", en: "no" },
				symbol: { zh: "图元图形", en: "symbol" },
				symbolSize: { zh: "图元大小", en: "symbolSize" },
				symbolColor: { zh: "图元颜色", en: "symbolColor" },
				symbolColorAlpha: {
					zh: "图元颜色透明度[0~1]",
					en: "symbolColorAlpha[0~1]"
				},
				opacity: { zh: "图元透明度[0~1]", en: "opacity[0~1]" },
				colorLightness: {
					zh: "图元颜色明暗度[0~1]",
					en: "symbolColorLightness[0~1]"
				},
				colorSaturation: {
					zh: "图元颜色饱和度[0~1]",
					en: "symbolColorSaturation[0~1]"
				},
				colorHue: { zh: "图元颜色色调[0~360]", en: "symbolColorHue[0~360]" },
				isRange:{zh:"视觉通道开启",en:"isRange"}
			},
			isShow: false,
			isRange:false,
			rangeStyle: {
				color: ["#0099FF"],
				symbol: ["circle"],
				symbolSize: [30, 100],
				//[0, 1]
				colorAlpha:1,
				opacity: 1,
				colorLightness:[0,1],
				colorSaturation:[0,1],
				colorHue: 0 //[0, 360],
			},
			symbol: [
				{ zh: "无", en: "none" },
				{ zh: "圆形", en: "circle" },
				{ zh: "方形", en: "rect" },
				{ zh: "圆角方形", en: "roundRect" },
				{ zh: "三角形", en: "triangle" },
				{ zh: "图钉", en: "pin" },
				{ zh: "箭头", en: "arrow" },
				{ zh: "钻石", en: "diamond" }
			],
			
			picker: {
				show: false,
				current: "",
				result: "",
				idx: 0
			},
			originOption:'',
			isParse:false
		}),
		watch:{
			isShow() {
				if (this.isShow) {
					this.parseObj();					
				}else{
					this.picker.show = false;
				}

			},
			rangeStyle:{
				deep:true,
				handler(){
					if(this.isShow&&!this.isParse)
					if(this.isRange){
						this.$emit("range-style-result", JSON.parse(JSON.stringify(this.rangeStyle)));
					}else{
						this.$emit("range-style-result", null);
					}
				}
			}
			
		},
		methods: {
			addColorPicker() {
				this.rangeStyle.color.push("#FFFFFF");
			},
			delColorPicker(idx){
				this.rangeStyle.color.splice(idx,1);
			},
			showRangeColor(tag, item, idx) {
				if (tag != this.picker.current || !this.picker.show) {
					this.picker.current = tag;
					this.picker.idx = idx;
					this.picker.result = this.rangeStyle.color[idx];
					this.picker.show = true;
				} else {
					this.picker.show = false;
				}
			},
			onRangeColor(op) {
				this.rangeStyle.color[this.picker.idx] = op.rgba;
			},
			showColorPicker(tag) {
				if (tag != this.picker.current || !this.picker.show) {
					this.picker.current = tag;
					this.picker.show = true;
				} else {
					this.picker.show = false;
				}
			},
			onColorPicker(op) {
				if(this.picker.current)
				this.rangeStyle[this.picker.current]=op.rgba;
			},
			sendStyle() {
				this.isShow=this.isShow?false:true;
				if(!this.isShow){
					if(this.isRange){
						this.$emit("range-style-result", JSON.parse(JSON.stringify(this.rangeStyle)));
					}else{
						this.$emit("range-style-result", null);
					}
				
				}
			},
			parseObj(){
				this.isParse=true;
				if(this.option){
					
					this.isRange=true;
				for(var key in this.option){
					this.rangeStyle[key]=this.option[key];
				}
				this.originOption=JSON.stringify(this.rangeStyle);
				}else{
					this.isRange=false;
				}
				var that=this;
				setTimeout(() => {
					that.isParse=false;
				}, 100);
			},
		colseOption(){
			this.isShow=false;
			if (this.originOption!=JSON.stringify(this.rangeStyle)) {
			
			this.$emit("range-style-result", this.rangeStyle);
			}
			},
			listenEvent(){
				this.app.$on('close-option',this.colseOption);
			},
			offEvent(){
			this.app.$off('close-option',this.colseOption);
			}
		},
		mounted() {
			this.listenEvent();
			
		},
		beforeDestroy(){
			this.offEvent();
		}
	};
</script>
